<template>
	<view class="auto-complete-scan-input-form-item-compontent">
		<view class="p-form-label" v-if="label"><text v-if="required" class="required-tag">*</text>{{label}}：</view>
		<view class="input-row" @tap.stop="onOpenPicker">
			<view class="mask" @tap.stop="" v-if="disabled"></view>
			<view class="input-view">
				<text v-if="!innerValue" class="placeholder">{{placeholder}}</text>
				<text v-else>{{innerValue}}</text>
			</view>
			<view class="close-view" @tap.stop="onClear" v-if="innerValue && clearable">
				<view class="close-circle">
					<u-icon
					    name="close"
					    size="11"
					    color="#ffffff"
					    customStyle="line-height: 12px"
					></u-icon>
				</view>
			</view>
		</view>
		<view class="msg-row" v-if="msg" :class="[msgType==='info'?'info-type':'']">{{msg}}</view>
		
		<u-popup mode="center" :show="pickerVisible" :closeOnClickOverlay="false" :safeAreaInsetTop="false" :safeAreaInsetBottom="false">
			<view class="auto-complete-picker-page" :style="{
				paddingTop:safetySize.top+'px',
				paddingBottom:safetySize.bottom+'px',
				paddingLeft:safetySize.left+'px',
				paddingRight:safetySize.right+'px'
			}">
				<view class="picker-input-box">
					<view class="input-row">
						<view class="input-view">
							<u--input 
								:clearable="true"
								border="none"
								:type="type"
								:placeholder="placeholder" 
								:focus="pickerFocus"
								v-model.trim="pickerValue"
								@clear="onPickerClear"
								@confirm="onPickerInputConfirm"
							/>
						</view>
						<view class="scan-view" v-if="hasScan">
							<view @tap.stop="onPickerScan"><u-icon name="scan" color="#F18201" :size="32"></u-icon></view>
						</view>
					</view>
				</view>
				<view class="picker-err-box" v-if="pickerErrMsg">{{pickerErrMsg}}</view>
				<view class="picker-list-view">
					<view class="picker-list-group">
						<view class="picker-item auto-wrap" v-for="(item,index) in list" :key="'picker-item-'+index" @tap.stop="onItemClick(item)">{{item}}</view>
					</view>
				</view>
				<view class="picker-bottom-btns">
					<view class="btn-frame"><u-button text="取 消" @click="onCancelPicker"></u-button></view>
					<view class="divider"></view>
					<view class="btn-frame"><u-button type="primary" text="确 认" @click="onPickerConfirm"></u-button></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getObjectType } from '@/static/js/utils/index.js'
export default {
	name:'autoCompleteScanInputFormItemCompontent',
	emits:['input','changeOptions','clear','confirm','change'],
	props:{
		type:{
			type:String,
			default:'text'
		},
		label:{
			type:String,
			default:''
		},
		placeholder:{
			type:String,
			default:'请输入...'
		},
		msg:{
			type:String,
			default:''
		},
		pickerErrMsg:{
			type:String,
			default:''
		},
		msgType:{
			type:String,
			default:'error'
		},
		value:{
			type:[String,Number,null],
			default:null
		},
		hasScan:{
			type:Boolean,
			default:true
		},
		disabled:{
			type:Boolean,
			default:false
		},
		clearable:{
			type:Boolean,
			default:true
		},
		required:{
			type:Boolean,
			default:false
		},
		initPickerList:{
			type:Boolean,
			default:false
		}
	},
	data(){
		return {
			innerValue:'',
			pickerValue:'',
			pickerVisible:false,
			pickerFocus:false,
			list:[],
			safetySize:{
				top:0,
				bottom:0,
				left:0,
				right:0
			}
		}
	},
	watch:{
		value(newVal,oldVal){
			if (newVal!==this.innerValue) {
				this.innerValue = newVal;
			}
		},
		innerValue(newVal,oldVal){
			if (newVal!==this.value) {
				this.$emit('input',newVal)
				this.$emit('change',newVal)
			}
		}
	},
	methods:{
		onOpenPicker(){
			this.pickerValue = this.innerValue
			this.pickerVisible = true
			this.$nextTick(()=>{
				this.pickerFocus = true
			})
			if (this.initPickerList) {
				this.getPickerList()
			}
		},
		onClear(){
			this.innerValue = null;
			this.$emit('clear')
		},
		onPickerClear(){
			this.pickerValue = null
		},
		onPickerInputConfirm(){
			this.getPickerList()
		},
		getPickerList(){
			this.$emit('changeOptions',this.pickerValue,(d)=>{
				if (getObjectType(d)==='array') {
					this.list = [...d]
				}
			})
		},
		onItemClick(val){
			this.pickerValue = val;
			this.list = []
		},
		onPickerScan(){
			uni.scanCode({
				success:(res)=>{
					this.pickerValue = res.result;
					this.getPickerList()
				},
				fail:function(){
					console.log('scanCode fail')
				}
			})
		},
		closePicker(){
			this.pickerVisible = false
			this.pickerFocus = false
		},
		onCancelPicker(){
			this.closePicker()
		},
		onPickerConfirm(){
			this.innerValue = this.pickerValue
			this.$emit('confirm',this.innerValue)
			this.closePicker()
		}
	},
	created() {
		this.innerValue = this.value
	},
	beforeMount(){
		let safety = this.$store.getters['system/getSafety'];
		if (safety) {
			this.safetySize.top = safety.top
			this.safetySize.bottom = safety.bottom
			this.safetySize.left = safety.left
			this.safetySize.right = safety.right
		} else {
			uni.getSystemInfo({
				success:(res=>{
					if (!res.safeAreaInsets) res.safeAreaInsets = {}
					this.safetySize.top = res.safeAreaInsets.top || 0;
					this.safetySize.bottom = res.safeAreaInsets.bottom || 0;
					this.safetySize.left = res.safeAreaInsets.left || 0;
					this.safetySize.right = res.safeAreaInsets.right || 0;
				})
			})
		}
	}
}
</script>

<style scoped lang="scss">
.auto-complete-scan-input-form-item-compontent{
	width: 100%;
	.p-form-label{
		font-size: 32rpx;
		color: $u-tips-color;
		padding-bottom: 12rpx;
		padding-left: 20rpx;
		.required-tag{
			color:$u-error;
		}
	}
	.msg-row{
		padding: 6rpx 20rpx 0 20rpx;
		line-height: 1.3;
		font-size: 24rpx;
		color: $u-error;
		word-break:break-all;
		word-wrap:break-word;
		&.info-type{
			color:$color-blue;
		}
	}
}
.input-row{
	width: 100%;
	height: 90rpx;
	overflow: hidden;
	background-color: $uni-bg-color;
	display: flex;
	align-items: center;
	position: relative;
	.close-view{
		.close-circle{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-color: #c6c7cb;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			transform: scale(0.82);
			margin-left: 4px;
		}
	}
	.scan-view,.close-view{
		flex-shrink: 0;
	}
	.scan-view,.close-view{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.scan-view{
		padding-right: 10rpx;
	}
	.input-view{
		flex-grow: 1;
		padding-left: 20rpx;
		font-size: 30rpx;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		color: rgb(48, 49, 51);
		.placeholder{
			color: rgb(192, 196, 204);
		}
	}
	&>.mask{
		background-color: #000;
		opacity: 0.25;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
	}
}
.auto-complete-picker-page{
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
	background-color: #f2f2f2;
	display: flex;
	flex-direction: column;
	.picker-input-box,.picker-bottom-btns,.picker-err-box{
		flex-shrink: 0;
	}
	.picker-input-box{
		padding: 16rpx;
		.input-row{
			border-radius: 6rpx;
		}
	}
	.picker-err-box{
		color: $u-error;
		padding: 0 16rpx 16rpx 16rpx;
		line-height: 1.3;
		font-size: 24rpx;
		word-break:break-all;
		word-wrap:break-word;
	}
	.picker-bottom-btns{
		display: flex;
		padding: 10rpx 20rpx;
		.btn-frame{
			width: 1%;
			box-sizing: border-box;
			flex-grow: 1;
		}
		.divider{
			width: 20rpx;
			flex-shrink: 0;
		}
	}
	.picker-list-view{
		flex-grow: 1;
		height: 1px;
		background-color: $uni-bg-color;
		overflow: auto;
		.picker-list-group{
			padding: 12rpx 16rpx;
			.picker-item{
				text-align: center;
				background-image: linear-gradient(to right, $color-paimary-darken, $color-paimary-lighten);
				border: 1px solid #e4e4e4;
				border-radius: 10rpx;
				padding: 20rpx;
				margin-bottom: 16rpx;
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
}
</style>